<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="./../../head.js"></script>
    <title>表格</title>
    <script>
        var app = angular.module('plunker', []);

        app.controller('MainCtrl', function($scope) {
            $scope.name = 'World';
            $scope.employees =[{id:101, name:'John', phone:'555-1276'},
                {id:102, name:'Mary', phone:'800-1233'},
                {id:103,name:'Mike', phone:'555-4321'},
                {id:104,name:'Adam', phone:'555-5678'},
                {id:105,name:'Julie', phone:'555-8765'},
                {id:106,name:'Juliette', phone:'555-5678'}];
            $scope.showEdit = true;
            $scope.master = {};
        });
        app.directive("edit",function($document){
            return{
                restrict: 'AE',
                require: 'ngModel',
                link: function(scope,element,attrs,ngModel){
                    element.bind("click",function(){
                        var id = "txt_name_" +ngModel.$modelValue.id;
                        scope.$apply(function(){
                            angular.copy(ngModel.$modelValue,scope.master);
                            //console.log(scope.master);
                        })
                        //console.log(id);
                        var obj = $("#"+id);
                        obj.removeClass("inactive");
                        obj.addClass("active");
                        obj.removeAttr("readOnly");
                        scope.$apply(function(){
                            scope.showEdit = false;
                        })
                    });
                }
            }
        });
        app.directive("update",function($document){
            return{
                restrict: 'AE',
                require: 'ngModel',
                link: function(scope,element,attrs,ngModel){
                    element.bind("click",function(){
                        //alert(ngModel.$modelValue + " is updated, Update your value here.");
                        var id = "txt_name_" +ngModel.$modelValue.id;
                        var obj = $("#"+id);
                        obj.removeClass("active");
                        obj.addClass("inactive");
                        obj.attr("readOnly",true);
                        scope.$apply(function(){
                            scope.showEdit = true;
                        })
                    })
                }
            }
        });
        app.directive("cancel",function($document){
            return{
                restrict: 'AE',
                require: 'ngModel',
                link: function(scope,element,attrs,ngModel){
                    element.bind("click",function(){
                        scope.$apply(function(){
                            angular.copy(scope.master,ngModel.$modelValue);
                            //console.log(ngModel.$modelValue);
                        })

                        var id = "txt_name_" +ngModel.$modelValue.id;
                        var obj = $("#"+id);
                        obj.removeClass("active");
                        obj.addClass("inactive");
                        obj.prop("readOnly",true);
                        scope.$apply(function(){
                            scope.showEdit = true;
                        })
                    })
                }
            }
        });
        app.directive("delete",function($document){
            return{
                restrict:'AE',
                require: 'ngModel',
                link:function(scope, element, attrs,ngModel){
                    element.bind("click",function(){
                        var id = ngModel.$modelValue.id;
                        alert("delete item where employee id:=" + id);
                        scope.$apply(function(){
                            for(var i=0; i<scope.employees.length; i++){
                                if(scope.employees[i].id==id){
                                    console.log(scope.employees[i])
                                    scope.employees.splice(i,1);
                                }
                            }
                            console.log(scope.employees);
                        })
                    })
                }
            }
        });
    </script>
    <style>
        .inactive {
            border: none;
            background-color: #fff;
        }
        .active{
            background-color: #fff;
        }
    </style>
</head>
<body  ng-app="plunker" ng-controller="MainCtrl">
<h2>Inline Edit</h2>
<!--<input id="test" value="ddd"/>-->
<table>
    <tr>
        <th>name</th>
        <th>phone</th>
        <th></th>
    </tr>
    <tr ng-repeat="employee in employees">
        <td>
            <edit ng-Model="employee">
            <input type="text" id='txt_name_{{employee.id}}' ng-model="employee.name" class="inactive" readonly />
            </edit>
        </td>
        <td> <input type="text" ng-model="employee.phone" class="inactive" readonly /></td>
        <td><edit ng-Model="employee" ng-show="showEdit"><a>Edit</a></edit>
            <update ng-Model="employee" ng-show="!showEdit"><a>Update</a></update>
            <cancel ng-Model="employee" ng-show="!showEdit"> | <a>Cencel</a></cancel>
            | <delete ng-Model="employee"><a>Delete</a></delete>

        </td>
    </tr>
</table>
</body>
</html>